<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.lp.cfg.ProConfig"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/oss/iot/common/variable.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/variable_js.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/resource_lib.jsp"%>
<style type="text/css">
	.index_theLeft ul {
	    width: 100%;
	    padding: 0px;
	    margin: 0px;
	    overflow: auto;
	}
	.index_theLeft li {
	    list-style: none;
	    text-align: center;
	    position: relative;
	    padding: 15px 0;
	    border-bottom: 1px solid #f9f9f9;
	    cursor: pointer;
	}
	
	.index_theLeft li.active , .index_theLeft li:HOVER{
		background: #f9f9f9;
	}
	
	.index_theLeft li span,.index_theLeft li h5{
		text-align: center;
		color: #333;
	}
	.mapContainer{
		height: 550px;width:100%;
	}
	.dashboard-menu{
		border-top:1px solid #ecf0f5;
	}
	.app-container{
		background:  #f2f2f2;width: 100%;border-top:1px solid #ecf0f5;
	}
	.box-white {
	    width: 97%;
	    min-width: 897px;
	    padding-bottom: 0;
	    margin: 0 auto;
	}
	.box {
	    padding: 10px;
	    padding-top:1px;
	    border-left: 1px solid #d2d6de;
	    border-right: 1px solid #d2d6de;
	    border-bottom: 1px solid #d2d6de;
	}
	.box {
	    border: 0!important;
	    box-shadow: 0 0 2px 1px rgba(13,5,9,.08)!important;
	}
	.box {
	    position: relative;
	    border-radius: 3px;
	    background: #fff;
	    border-top: 3px solid #d2d6de;
	    margin-bottom: 20px;
	    width: 100%;
	    box-shadow: 0 1px 1px rgba(0,0,0,.1);
	}

	.sceneList-info{
		padding-top: 10px;
		padding-left: 10px;
	}
	.grant_auth{
		padding: 20px;
	}
	.scene-style{
		padding-left: 40px;
	    height: 40px;
	    line-height: 40px;
	    background: url() 10px center no-repeat #fafafa;
	    color: #333;
	    margin: 2px 0;
	    border-radius: 3px;
	    cursor: pointer;
	    border: 1px solid #d9d9d9;
	}
	.scene-style.active{
		 background: url() 10px center no-repeat #00c0f1;
		 color: white; 
	}
	.dashboard-menu a {
	    display: inline-block;
	}
</style>
</head>
<body>
	<div>
		<div style="background: #ecf0f5;">
			<div class="mapContainer" >
				<div class="app-container">
					<div class="container-layout sceneList-info">
						<div class="box join-device-box">
						
							<div class="search-container jui-search_table" config-option="submit:'#searchbtns','table':'#init-table'">
									<input type-name="name" placeholder="用户名"   class="input input-self" />
									<input type-name="phone" placeholder="手机号"   class="input input-self ml-10" />
									<input type-name="aid" class="aid" value="${user.id}"  type="hidden" />
									<button onclick="addUser()" class="button ml-20 bg-iot float-right"><span class="icon-plus"></span> 新增用户</button>
									<button onclick="relateUser()" class="button ml-20 bg-iot float-right"><span class="icon-plus"></span> 关联子账户</button>
									<button id="searchbtns" class="button ml-20 bg-iot"><span class="icon-search"></span> 查询</button>
							</div>
							
							 <div style="margin-top:10px;">
								<div id="init-table" type-option="table"  config-option="url:'/page/user',
											param:{ aid:'$.aid$' },
											columns:[
												{'name':'序号','type':'seq','value':'seq','width':'6%'}, 
												{'name':'用户名','value':'name','width':'10%'}, 
												{'name':'手机号','value':'phone','width':'10%',default_value:'-'}, 
												{'name':'邮箱','value':'email','width':'15%'}, 
												{'name':'用户类型',type:'category','value':'type','width':'15%',style:{8:'color,#19bbff'}}, 
												{'name':'用户状态',type:'category','value':'status','width':'15%'}, 
												{'name':'注册时间',type:'time','value':'register_time','width':'15%'}, 
												{'name':'操作','type':'self','value_callback':'value_function','width':'10%'}]" > 
								
								</div>
							</div> 
						
						</div>
							<!-- 增加用户 -->
							<div style="display:none;padding:20px 40px; " type-option="form_submit" id="addUser" 
								  config-option="  url:'/user/info',
												   submit:'.add-Btn',
												   success:'sunccessReturn' ">
								<div class="form-line">
									<span class="red">*</span>&nbsp;<span>用户名：</span>
									<div class="pb-10 pt-10">
										<input placeholder="用户名" validate="empty" type-name="name" class="input input-big" >	
									</div>
								</div>
								<div class="form-line">
									<span class="red">*</span>&nbsp;<span>密码：</span>
									<div class="pb-10 pt-10">
										<input placeholder="密码" validate="empty" type-name="password" class="input input-big" >	
									</div>
								</div>
								<div class="form-line">
									<span class="red">*</span>&nbsp;<span>用户类型：</span>
									<div class="pb-10 pt-10">
										<select type-name="type" validate="empty:请选择用户类型" type-option="selecter" 
												config-option="'method':'GET','url':'/dictionary?ids=
												<c:if test="${user.type == 10 }">
													8,7
												</c:if>
												<c:if test="${user.type != 10 }">
													7
												</c:if>
												','key':'code','value':'name',
													'init_value':'请选择用户类型','type':'list' " class="input input-big" ></select>
									</div>
								</div>
								<div class="form-line">
									<span class="red">*</span>&nbsp;<span>手机号：</span>
									<div class="pb-10 pt-10">
										<input placeholder="手机号"  type-name="phone" validate="phone:请输入正确的手机格式" class="input input-big" >
									</div>
								</div>
								<div class="form-line">
									<span class="red">*</span>&nbsp;<span>邮箱：</span>
									<div class="pb-10 pt-10">
										<input placeholder="邮箱"  type-name="email" validate="email:请输入正确的邮箱格式" class="input input-big" >
									</div>
								</div>
								<div class="form-line clearfix ">
									<button onclick="closeAll();" class="button border-gray ml-10 button-big float-right">取消</button>
									<button class="add-Btn button ml-20 bg-iot button-big float-right">保存</button>
								</div>
							</div>
							<!-- 编辑用户 -->
							<div style="display:none;padding:20px 40px;" type-option="form_submit" id="modifyUser" 
								  config-option="url:'/user/info', method :'put',
												  submit :'.modify-Btn',
												  success:'sunccessReturn' ">
								<div id="detail_get" config-option=" url:'/user/info?id=$#init-id$' ">
									<input type="hidden" type-name="id" id="init-id" >
									<div class="form-line">
										<span class="red">*</span>&nbsp;<span>用户名：</span>
										<div class="pb-10 pt-10">
											<input placeholder="用户名" readonly="readonly" validate="empty" type-name="name" class="input input-big" >
										</div>	
									</div>
									<div class="form-line">
										<span class="red">*</span>&nbsp;<span>密码：</span>
										<div class="pb-10 pt-10">
											<input placeholder="密码" validate="empty" type-name="password" class="input input-big" >
										</div>	
									</div>
									<div class="form-line">
										<span class="red">*</span>&nbsp;<span>用户类型：</span>
										<div class="pb-10 pt-10">
											<select type-name="type" validate="empty:请选择用户类型" type-option="selecter" 
													config-option="'method':'GET','url':'/dictionary?ids=
														<c:if test="${user.type == 10 }">
															8,7
														</c:if>
														<c:if test="${user.type != 10 }">
															7
														</c:if>
														','key':'code','value':'name',
														'init_value':'请选择用户类型','type':'list' " class="input input-big input-select" ></select>
										</div>
									</div>
									<div class="form-line">
										<span class="red">*</span>&nbsp;<span>手机号：</span>
										<div class="pb-10 pt-10">
											<input placeholder="手机号"  type-name="phone" validate="phone:请输入正确的手机格式" class="input input-big" >
										</div>
									</div>
									<div class="form-line">
										<span class="red">*</span>&nbsp;<span>邮箱：</span>
										<div class="pb-10 pt-10">
											<input placeholder="邮箱"  type-name="email" validate="email:请输入正确的邮箱格式" class="input input-big" >
										</div>
									</div>
									<div class="form-line clearfix">
										<button onclick="closeAll();" class="button border-gray ml-10 button-big float-right">取消</button>
										<button class="modify-Btn button ml-20 bg-iot button-big float-right">保存</button>
									</div>
								</div>
							</div>
							<!-- 子账户，项目授权  -->
							<div class="grant_auth hide">
								<div class="pointer" >		
									<input type="checkbox" onclick="selectedAll(this);"> <span>全选</span>
								</div>
								<div class="pt-10 mt-10 scene-list scoll" style="max-height: 500px;overflow: auto;">
								</div>
								<div class="mt-20 clearfix">
									<button onclick="closeAll();" class="button border-gray ml-10 button-big float-right">取消</button>
									<button class="saveScene button ml-20 bg-iot button-big float-right">保存</button>
								</div>
							</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
function value_function(data,seq){
	return "<span tag='编辑' onclick='t_edit(this,"+data.id+")' class='self-icon icon-edit'></span>"+
		   "<span tag='删除' onclick='t_delete(this,"+data.id+")' class='self-icon icon-bitbucket'></span>"+
		   "<span tag='项目授权' onclick='t_generateScene(this,"+data.id+")' class='self-icon icon-exchange'></span>";
}
function t_delete(obj,i){
	lcomfirm('是否确定删除该用户？',function(){
		commonAjax("DELETE",localUrl+"/user/info?id="+i, "",function(){
			tip("删除成功");
			$("#init-table").tableAdaptor();
		});
	})
}

function t_edit(obj,id){
	writeVal("init-id",id);
	openWindow("编辑用户信息","#modifyUser","600px");
	manual_init_detail_get($("#detail_get"));
}

function t_generateScene(obj,i){	
	t_generate(obj,i)
}
function selectedAll(obj){
	if( $(obj).hasClass("active") ){
		$(obj).removeClass("active");
		$(obj).find("input").attr("checked",false);
		$(".scene-style").removeClass("active");
	}else{
		$(obj).addClass("active");
		$(obj).find("input").attr("checked",true);
		$(".scene-style").addClass("active");
	}
}
function selectedScene(obj){
	if( $(obj).hasClass("active") ){
		$(obj).removeClass("active");
	}else{
		$(obj).addClass("active");
	}
}
function scene_init(){
	postAjax(localUrl+"/page/relation/scene/user?paged=1&pageSize=100", {user_id:'${user.id}' },function(data){
		if( isOK(data) ){
			$(".scene-list").empty();
			for(var i=0;i<data.data.data.length;i++){
				$(".scene-list").append('<div class="scene-style" onclick="selectedScene(this);" tag="'+ data.data.data[i].scene_id +'">'+' <span class="ml-10">  '+data.data.data[i].name+'</span>'+'</div>');
			}
		}
	})
}
function t_generate(obj,id){
	openWindow("项目授权",".grant_auth","400px");
	
	$(".saveScene").attr("tag",id);
	// 获取该用户已有的授权信息
	postAjax(localUrl+"/page/relation/scene/user?paged=1&pageSize=100", {user_id:id},function(data){
		if( isOK(data) ){
			$(".scene-list div.scene-style").removeClass("active");
			for(var i=0;i<data.data.data.length;i++){
				$("div.scene-style[tag='"+data.data.data[i].scene_id  +"']").addClass("active");
			}
		}
	})
}

// 增加用户
function addUser(){
	$("#addUser input,#addUser select").val("");
	openWindow("新增用户","#addUser","550px");
}

function relateUser(){
	layer.prompt({title: '关联为子账户', formType: 2 ,content: "<input class='input userAccount' placeholder='用户登录账户' >" ,yes: function(val, index){
		commonAjax('PUT',localUrl+'/bind/sub/account.json?userName=' +$(".userAccount").val() , {},function(data){
			if(isOK(data)){
				tip("关联成功");
			}else{
				tip("关联失败，该账户不能绑定") ;
			}	
			setTimeout( function() {
				layer.closeAll();				
				$("#init-table").tableAdaptor();
			}, 1000);
		});	
	} });
}

function sunccessReturn(data){
	if(data.status == status_code.OK){
		tip("保存成功");
		setTimeout(function(){
			closeAll();
			$("#init-table").tableAdaptor();
		},1000)
	}else{
		tip(data.statusMsg);
	}
}
$(function(){
	// 场景初始化
	scene_init();
	$(".saveScene").click(function(){
		var obj ='';
		for(var i=0;i<$(".scene-style.active").length;i++){
			obj += ","+$(".scene-style.active").eq(i).attr("tag");
		}
		// 保存更新数据
		postAjax(localUrl+"/relation/scene/user", {user_id:$(".saveScene").attr("tag"),ids:obj.substring(1) },function(data){
			if( isOK(data) ){
					tip("保存成功");
				setTimeout(function(){
					closeAll();
				}, 1000);
			}else{
				tip(data.statusMsg);
			}
		})
	})
})
</script>
</html>